<template>
  <div class="car-page-wrapper">
    <div class="header">
      <div class="search">
        <a-input
          :style="{ width: '320px' }"
          placeholder="按下Enter进行搜索"
          allow-clear
          @change="handleSearch"
        />
        <a-button type="primary" @click="handleSearch">搜索</a-button>
      </div>

      <template v-if="userInfo?.role === 2 || userInfo?.status === 'admin'">
        <div class="operations">
          <a-space>
            <a-button @click="() => setHistoryModalVisible(true)"
              >操作记录</a-button
            >
            <a-button @click="() => setModalVisible(true)" type="primary">
              添加药品
            </a-button>
          </a-space>
        </div>
      </template>
    </div>

    <div class="line">
      <div class="label">现有药品</div>
      <div class="content">
        <template v-for="item in filteredData" :key="item.id">
          <template v-if="item.health">
            <carCard :data="item">
              <template #default>
                <div class="textInfo">
                  <div>
                    <span>{{ item.medicineName }}</span>
                    <span>({{ item.medicineNumber }})</span>
                  </div>
                  <span>{{ item.deadline }}</span>
                </div>
                <countButton :item="item" :refresh="getData"></countButton>
              </template>
            </carCard>
          </template>
        </template>
      </div>
    </div>

    <div class="line">
      <div class="label">过期药品</div>
      <div class="content">
        <template v-for="item in filteredData" :key="item.id">
          <template v-if="!item.health">
            <carCard :data="item">
              <template #default>
                <div class="textInfo">
                  <div>
                    <span>{{ item.medicineName }}</span>
                    <span>({{ item.medicineNumber }})</span>
                  </div>
                  <span>{{ item.deadline }}</span>
                </div>
                <div class="buttons">
                  <a-button
                    @click="handleDelete({ id: item.id })"
                    type="danger"
                  >
                    删除
                  </a-button>
                </div>
              </template>
            </carCard>
          </template>
        </template>
      </div>
    </div>
  </div>

  <!-- <div class="history">
    <div class="label">出入库历史记录</div>
  </div> -->

  <modal :setVisible="setModalVisible" :visible="modalVisible">
    <a-form :model="form" @submit="handleSubmit">
      <a-form-item field="medicineName" label="药品名称">
        <a-input v-model="form.medicineName" placeholder="请输入名称" />
      </a-form-item>
      <a-form-item field="medicineNumber" label="数目">
        <a-input v-model="form.medicineNumber" placeholder="请输入描述" />
      </a-form-item>
      <a-form-item field="month" label="有效月份">
        <a-input v-model="form.month" placeholder="请输入日期" />
      </a-form-item>

      <a-form-item>
        <a-button html-type="submit">确认</a-button>
      </a-form-item>
    </a-form>
  </modal>

  <modal
    :setVisible="setHistoryModalVisible"
    :visible="historyModalVisible"
    :width="1200"
  >
    <a-table :columns="columns" :data="history" />
  </modal>
</template>

<script setup lang="ts">
import carCard from "@/components/oldman/car-card/index.vue";
import { commonRequest } from "@/utils/request";
import { onMounted } from "vue";
import modal from "@/components/common/modal/index.vue";
import { ref } from "vue";
import { reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  addActivity,
  addMedicine,
  enterActivity,
  enteredActivity,
  exitActivity,
  getActivityList,
  getMedicine,
  getMedicineHistory,
} from "@/apis/oldman";
import dayjs from "dayjs";
import countButton from "@/components/oldman/count-button/index.vue";

const baseForm = {
  medicineName: "",
  month: 0,
  medicineNumber: 0,
};

const history = ref([]);
const allData = ref(null);
const filteredData = ref([]);
const modalVisible = ref(false);
const form = reactive({
  medicineName: "",
  month: 0,
  medicineNumber: 0,
});
const userInfo = ref(null);
const outdatedList = ref([]);
const historyModalVisible = ref(false);

const setHistoryModalVisible = async (v) => {
  historyModalVisible.value = v;
};

const columns = [
  {
    title: "药品",
    dataIndex: "medicineName",
  },
  {
    title: "操作类型",
    dataIndex: "stockType",
  },
  {
    title: "操作数量",
    dataIndex: "updateNumber",
  },
  {
    title: "操作时间",
    dataIndex: "createTime",
  },
  {
    title: "操作人",
    dataIndex: "createBy",
  },
];

const getData = async () => {
  const res = await getMedicine();
  const res1 = await getMedicineHistory();
  allData.value = res.data.data;
  filteredData.value = allData.value;
  history.value = res1.data.data;
  // enteredList.value = res1.data.data;
};

const setModalVisible = (v: boolean) => {
  modalVisible.value = v;
};

const handleDelete = async (data: any) => {
  const res = await commonRequest.post("/carproducts/delete", { id: data.id });
  if (res.data.code === 200) {
    Message.success("删除成功");
    getData();
  }
};

const sendFormData = async () => {
  const res = await addMedicine({
    medicineName: form.medicineName,
    medicineNumber: +form.medicineNumber,
    month: +form.month,
  });
  if (res.data.code === 200) {
    Message.success("添加成功");
  }
};

const handleSubmit = async () => {
  await sendFormData();
  setModalVisible(false);
  getData();
};

const handleSearch = (value: string) => {
  console.log(value);
  if (value) {
    const v = value.toLowerCase();
    filteredData.value = allData.value.filter((item: any) => {
      return (
        item.description.toLowerCase().includes(v) ||
        item.bodytype.toLowerCase().includes(v) ||
        item.fueltype.toLowerCase().includes(v) ||
        item.exteriorcolor.toLowerCase().includes(v) ||
        item.interiorcolor.toLowerCase().includes(v)
      );
    });
  } else {
    filteredData.value = allData.value;
  }
};

const getDataAlreadyEntered = async () => {
  const res = await enteredActivity();
  return res;
};

const join = async (item: any) => {
  const res = await enterActivity({ id: item.id });
  if (res.data.code === 200) {
    Message.success("添加成功");
    getData();
  }
};

onMounted(() => {
  const userInfoJSON = localStorage.getItem("userInfo");
  userInfo.value = JSON.parse(userInfoJSON);
  getData();
});
</script>

<style scoped>
.header {
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
}

.search {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

.car-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.body {
  padding: 24px;
}

.line {
  margin-top: 24px;
}

.label {
  font-weight: 800;
  padding: 8px 0;
}

.content {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.time-wrapper {
  display: flex;
  justify-content: space-around;
}

.textInfo {
  display: flex;
  justify-content: space-between;
}

.buttons {
  display: flex;
  justify-content: flex-end;
}
</style>
